<template>
<div>
    
  <!-- 顶部导航栏 -->
  <van-nav-bar route title="时代阳光物业"  left-arrow >
  <template #right>
    <van-icon name="location-o" size="18" />
  </template>
    </van-nav-bar>
    <!-- ----------- -->
     <div class="goods">
         <div><span>申请服务项目</span><input type="text" v-model="goods.itemName"></div>
    <div><span>申请人姓名</span><input type="text" v-model="goods.name" placeholder="请输入申请人姓名"></div>
    <div><span>性别</span><input type="text" v-model="goods.sex" placeholder="请输入性别"></div>
    <div><span>联系方式</span><input type="text" v-model="goods.tel" placeholder="请输入联系方式"></div>
    <div><span>服务时间</span><input type="text" v-model="goods.time"></div>
    <p style=" font-size: 14px;">地址</p><textarea v-model="goods.addr" placeholder="请输入详细地址"></textarea>

    <button @click="submit" class="btn">确认</button>
     </div>
   
</div>
</template>
<script setup>
import {ref} from 'vue';
import {postGoods} from '../api/index.js'
const goods = ref({
    "itemName": "", 
"name": "", 
"sex": "", 
"tel": "", 
"time": "", 
"addr": "" 
});
console.log(goods.value)
postGoods('https://d941b892-db01-4b40-b8ac-4dd0901f822f.bspapp.com/apis/wuye/pub/book_serve',{
    "itemName": "", 
"name": "", 
"sex": "", 
"tel": "", 
"time": "", 
"addr": "" 
})	.then(res=>{
			console.log(res.data)
		})
		.catch(err=>{
			console.log(err)
		})
function submit(){
    console.log(goods.value)
}
</script>
<style scoped>
input{
    border: 0;
}
.goods{
    position: relative;
    box-sizing: border-box;
    padding: 0 10px;
}
.goods>div{
   border-bottom:1px solid grey;
    height: 40px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.goods>div>input{
    width: 60%;
}
.goods>div>span{
    font-size: 14px;
   
}
textarea{
    width: 100%;
    height: 144px;
}
.btn{
    position: absolute;
    left: calc(50% - 150px);
    top: 140%;
    width: 300px;
    background-color: #00a1d6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
}
</style>